<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes shun {
            0% {}

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes ni {
            0% {}

            100% {
                transform: rotate(-1080deg);
            }
        }

        body {
            background: url(./beijing.jpg) top center no-repeat;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            position: relative;

            overflow: hidden;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
        }

        .h {
            margin-top: 10px;
            height: 60px;
        }

        .fl {
            float: left;
            height: 40px;
            margin-left: 30px;
            margin-top: 10px;
        }

        .fr {
            margin-top: 10px;
            float: right;
            height: 40px;
        }

        span { 
            position: relative;
            display: block;
            float: left;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
            margin-right: 30px;
            /* border-bottom: 2px solid #fff; */
        }
@keyframes ting{
    from{
        transform: rotateY(90deg); opacity: 0;
    }
    to{
        transform: rotateY(0deg);opacity: 1;
    }
}
span>div{position: absolute;
/* left: 50%; */
bottom: 0px;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: rotateY(90deg);
    /* overflow: hidden; */
    /* transition: 1s ease; */
}
span:hover{
    cursor: pointer;
}
        span:hover div{
            animation: ting 1s forwards;
            
        }

        .img {
            position: absolute;
            left: 50%;
            margin-left: -365px;
            margin-top: 0px;
        }

        .zhuan {
            position: absolute;
            top: 66px;
            left: 50%;
            margin-left: -360px;
            width: 719px;
            height: 719px;
            background: url(./spr_bannerPathway.png) -2436px 0px no-repeat;
            animation: shun 20s infinite linear;
        }

        .nei {
            position: absolute;
            top: 88px;
            left: 50%;
            margin-left: -324px;
            width: 648px;
            height: 674px;

            background: url(./spr_bannerPathway.png) -2436px -724px no-repeat;
            animation: ni 20s infinite linear;
        }
    </style>
</head>

<body>
    <div class="h w">
        <div class="fl"><img src="./xl-logo2x.png" alt="" height="40px"></div>
        <div class="fr"> <span>首页<div></div></span>
            <span>产品中心 <div></div></span>
            <span>区块链 <div></div></span>
            <span>广告服务<div></div></span>
            <span>关于我们<div></div></span>
            <span>投资者关系<div></div></span>
        </div>

    </div>
    <div class="zhuan">

    </div>
    <div class="nei"></div>
    <img src="./earth01.png" alt="" class="img">
</body>

</html>